<template>
  <div class="regist-message">
    <form>
      <ul class="left">
        <li class="hint">
          <label id="hint"> {{ hintSentence }} </label>
        </li>
        <li class="regist-input">
           <label>用户名：</label>
           <input v-model="userName" id="user-name" class="regist-input" placeholder="请输入用户名" >
        </li>
        <li class="regist-input">
            <label>密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
            <input v-model="passWord" id="user-password" class="regist-input" placeholder="请输入密码" >
        </li>
        <li class="regist-input">
            <label>重复密码：</label>
            <input v-model="rePassword" id="user-password-re" class="regist-input" placeholder="请再次输入密码" >
        </li>
        <li class="regist-submit">
            <FunctionButtons @click.native="registCount" buttonName="注册"></FunctionButtons>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
/* eslint-disable */
import FunctionButtons from './Button.vue'
import PageName from "@/components/PageName";

export default {
  name: 'RegistMessage',
  props: {
    hintSentence: {
      type: String,
      default: '欢迎您！请您注册！'
    }
  },
  data: function () {
    return {
      userName: '',
      passWord: '',
      rePassword: ''
    }
  },
  methods: {
    registCount: function () {
      const app = tcb.init({ env: 'rhythm-8gijcn1i263ac8ec' })

      const auth = app.auth()

      auth.anonymousAuthProvider().signIn() // 匿名登录，实际业务时根据需要进行调整
        .then(() => {
          console.log('数据库用户登录成功') // 登录成功
        }).catch(err => {
          console.log('数据库用户登录失败', err) // 登录失败
        })

      const db = app.database()

      if (this.userName === '' || this.passWord === '' || this.rePassword === '') {
        confirm('用户名或密码不能为空！')
      } else {
        if (this.userName.length <= 20 && this.passWord.length <= 20 && this.rePassword.length <= 20) {
          if (this.passWord === this.rePassword) {
            db.collection('user')
              .where({
                uname: this.userName
              })
              .get()
              .then((res) => {
                console.log(res.data)
                if (res.data.length > 0) {
                  window.alert('此用户已存在！')
                } else {
                  db.collection('user')
                    .add({
                      uname: this.userName,
                      password: this.passWord
                    })
                    .then((res) => {
                      db.collection('log')
                        .add({
                          uid: null,
                          op: '注册用户 -u ' + this.userName + ' -p ' + this.passWord,
                          time: Date.now()
                        })
                      window.alert('注册成功！')
                    })
                }
              })
          } else {
            confirm('密码不相同！')
          }
        } else {
          console.log(this.userName.length)
          console.log(this.passWord.length)
          confirm('用户名或密码太长！')
        }
      }
    }
  },
  components: {
    FunctionButtons,
    PageName
  }
}
</script>

<style scoped>
li {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  list-style: none;
}
label {
  width: 100px;
  font-size: 20px;
  font-weight: 700;
}
#hint {
  width: 200px;
}
.regist-input input {
  width: 200px;
  height: 40px;
  border-radius: 5px;
  border: 0;
  /* box-sizing: border-box; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}
</style>
